<template>
  <view>
    <u-toast ref="uToast" />
    <u-navbar title="编辑资料" :autoBack="true" />
    <view class="userinfo_box u-border-bottom body">
      <button class="userinfo_btn" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
        <image class="image" bindtap="avatar" :src="userInfo.avatar" mode="aspectFit" />
        <view class="icon">
          <u-icon name="camera" color="#fff" size="35" />
        </view>
      </button>
    </view>
    <view>
      <tn-list-cell :arrow="true">
        <view class="tn-flex tn-flex-col-center tn-button--clear-style">
          <view class="tn-flex tn-flex-row-between" style="width: 95%;">
            <view class="tn-margin-left-sm">昵称</view>
            <input v-model="userInfo.nickname" type="nickname" class="tn-input tn-input--clear-style tn-text-right" placeholder="请输入昵称" @blur="changeNickname" />
          </view>
        </view>
      </tn-list-cell>
      <tn-list-cell :arrow="true">
        <view class="tn-flex tn-flex-col-center">
          <view class="tn-flex tn-flex-row-between" style="width: 95%;">
            <view class="tn-margin-left-sm">学校</view>
            <view class="tn-text-right">{{ userInfo.schoolName }}</view>
          </view>
        </view>
      </tn-list-cell>
      <tn-list-cell :arrow="true">
        <button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
          <view class="tn-flex tn-flex-row-between" style="width: 95%;">
            <view class="tn-margin-left-sm">号码</view>
            <view class="tn-text-right">{{ userInfo.mobile ? userInfo.mobile: '未绑定' }}</view>
          </view>
        </button>
      </tn-list-cell>
    </view>
  </view>
</template>

<script>
import { cosToken, getPhoneNumber, changeAvatar, changeNickname, changeMobile } from '@/api';
export default {
  components: {},
  data() {
    return {}
  },
  computed: {},
  methods: {
    // 选择头像
    async chooseAvatar(e) {
      const { avatarUrl } = e.detail;
      const token = await cosToken();
      if (token.code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: token.message
        });
      }
      const images = await uni.$u.uploadFile([{ url: avatarUrl }], token.data);
      const { code, message, data } = await changeAvatar({ url: images[0] });
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.userInfo.avatar = images[0];
      this.$refs.uToast.show({
        type: 'success',
        message: message
      });
    },

    // 修改昵称
    async changeNickname(e) {
      const { value } = e.detail;
      const { code, message, data } = await changeNickname({ nickname: value });
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.$refs.uToast.show({
        type: 'success',
        message: message
      });
    },

    // 获取手机号
    async getPhoneNumber(e) {
	  if (!e.detail.code) {
		return this.$refs.uToast.show({
          type: 'error',
          message: '授权失败'
        });
	  }
      const { code, message, data } = await getPhoneNumber({ code: e.detail.code });
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.userInfo.mobile = data;
      await changeMobile({ mobile: data });
      this.$refs.uToast.show({
        type: 'success',
        message: '绑定成功'
      });
    }
  },
  watch: {

  },

  // 页面周期函数--监听页面加载
  onLoad() { },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() { },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
} 
</script>

<style lang="scss" scoped>
.body {
  padding: 0 30rpx;
}

.userinfo_box {
  width: 100%;
  height: 375rpx;
  padding-top: 100rpx;
  background: transparent;
  backdrop-filter: blur(20px);

  .userinfo_btn {
    padding: 0;
    width: 180rpx;
    height: 180rpx;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    margin-bottom: 30rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);

    .image {
      width: 180rpx;
      height: 180rpx;
      object-fit: cover;
      display: block;
      position: relative;
      z-index: 1;


      ::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    .icon {
      position: absolute;
      font-size: 65rpx;
      color: #fff;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 9999;
    }
  }
}
</style>